<template>
	<view class="contents jbs" style="height: 100vh;">
		<view class="headers">
			<u-search @clickIcon="searchs" @search="searchs" placeholder="科室/医生名称" v-model="keyword" :showAction="false"
				placeholder-color="width">
			</u-search>
			<u-popup v-model="showcode" mode="center">
				<view class="code">
					<!-- <canvas  style="width: 400rpx;height: 400rpx;" canvas-id="couponQrcode"></canvas> -->
					<uv-qrcode ref="qrcode" size="400rpx" :value="user.IDCard"></uv-qrcode>
					<!-- <canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas> -->
					<view class="codetetx">
						<span>姓名：{{user.Name}}</span>
						<span>身份证：{{user.IDCard}}</span>
					</view>
				</view>
			</u-popup>
			<view class="existjiuzhenka bacnone2" v-if="exist==true">
				<view class="existleft">
					<view class="elone">
						<view><span>{{hideInsurantName(user.Name)}}&emsp;</span></view>
						<view class="mr"><span>默认</span></view>
						<!-- <view class="qh" @click="addjzk"><span>切换</span></view> -->
					</view>
					<span>{{hideInsurantName(user.IDCard)}}</span>
					<span>{{hideInsurantName(user.Mobile)}}</span>
				</view>
				<view class="existright" @click="canvas">
					<view class="qrcode" style="position: relative;">
						<u-image width="150rpx" height="150rpx" src="/static/icon/ewm.png"></u-image>
						<span class="sm bacnone2" style="position: absolute;top: 62rpx;">扫码就医</span>
					</view>
				</view>
				<view class="existcont">
					<view>
						<view style="width: 30px;float: left; "><u-icon name="/static/icon/yuan.png" size="22"></u-icon>
						</view><span style="float: left;">默认就诊人</span>
					</view>
					<span class="Unbinding" @click="addjzk">切换</span>
				</view>
			</view>
			<view class="jiuzhenka bacnone2" v-else @click="addVisit">
				<view class="headera">
					<!-- <view style="width:13%;float: left;"><u-icon size="80" name="/static/logo.png"></u-icon></view> -->
					<view style="color: white;float: left;">医院预约系统</view>
				</view>
				<view class="textlist">
					<span style="font-size: 20px;font-weight: 600;">就诊卡</span>
					<span style="font-size: 14px;">Medical Card</span>
					<view class="color1"
						style="background-color: white;margin-top: 10px;width: 100%;text-align: center;font-size: 30rpx;font-weight: bold;">
						<span>初次使用请先添加就诊人</span>
					</view>
				</view>
			</view>
			<view class="cont">
				<view class="contlist" @click="Department">
					<view class="contleft color1">
						<u-icon name="/static/icon/yygh.png" size="100"></u-icon>
					</view>
					<view class="contright">
						<span class="conta">预约挂号</span>
						<span class="contb">找专家&emsp;快速预约</span>
					</view>
				</view>
				<view class="contlist" @click="Mknowledge">
					<view class="contleft">
						<u-icon name="/static/icon/jkzx.png" size="100"></u-icon>
					</view>
					<view class="contright">
						<span class="conta">报告查询</span>
						<span class="contb">手机查看&emsp;早知道</span>
					</view>
				</view>
			</view>

		</view>

		<view class="jgc"></view>
		<view class="row">
			<view class="title">
				<span>门诊服务</span>
			</view>
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(mzlistItem,mzlistIndex) in mzlist" :key="mzlistIndex"
					@click="mzlistclick(mzlistIndex)">
					<view style="">
						<u-icon :name="mzlistItem.name" :size="80"></u-icon>
					</view>
					<view class="">
						<text class="grid-text">{{mzlistItem.title}}</text>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- <view class="jgc"></view>
		<view class="row">
			<view class="title">
				<span>住院功能</span>
			</view>
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(zylistItem,zylistIndex) in zylist" :key="zylistIndex"
					@click="zylistclick(zylistIndex)">
					<view style="">
						<u-icon :name="zylistItem.name" :size="80"></u-icon>
					</view>
					<view class="">
						<text class="grid-text">{{zylistItem.title}}</text>
					</view>
				</u-grid-item>
			</u-grid>
		</view> -->

		<view class="jgc"></view>
		<view class="row">
			<view class="title">
				<span>体检服务</span>
			</view>
		<u-grid :border="false" col="4">
			<u-grid-item v-for="(tjlistItem,tjlistIndex) in tjlist" :key="tjlistIndex"
				@click="tjlistclick(tjlistIndex)">
				<view style="">
					<u-icon :name="tjlistItem.name" :size="80"></u-icon>
				</view>
				<view class="">
					<text class="grid-text">{{tjlistItem.title}}</text>
				</view>
		
			</u-grid-item>
		</u-grid>
		</view>
		<view class="jgc"></view>
		<view class="row">
			<view class="title">
				<span>特色服务</span>
			</view>
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(ynlistItem,ynlistIndex) in ynlist" :key="ynlistIndex" @click="click(ynlistIndex)">
					<view style="">
						<u-icon :name="ynlistItem.name" :size="80"></u-icon>
					</view>
					<view class="">
						<text class="grid-text">{{ynlistItem.title}}</text>
					</view>
				</u-grid-item>
			</u-grid>
		</view>

		<view class="" style="width: 100%;display: flex;justify-content: center;padding: 60rpx 30rpx; font-size: 25rpx;">
			<view class="copyright">
				<view class="fleft">集宁妇幼医院</view>
			</view>
			<view class="copyright">
				<view class="fleft"><span>&emsp;©.</span></view>
				<view class="fleft">徐州市通用科技</view>
			</view>
		</view>
		<view class="dixia">

		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import UQRCode from 'uqrcodejs';

	export default {
		data() {
			return {
				showcode: false,
				user: {
					Mobile: '暂无',
					IDCard: '暂无',
					Name: '暂无'
				},
				couponQrcode: '123465798',
				exist: false,
				addimg: '/static/tjjzk.png',
				keyword: '',
				src: '/static/gg.png',
				tjlist: [
					{
						id: '0',
						token: 'ss',
						path: '/pages/block/Visit/Visitcopy',
						name: '/static/icon/tjyyy.png',
						title: '预约体检'
					},
					{
						id: '1',
						token: 'ss',
						path: '/pages/zhuyaun/tijian/tijianlist',
						name: '/static/icon/tjyy.png',
						title: '体检记录'
					},
					// {
					// 	id: '2',
					// 	token: 'ss',
					// 	path: '/pages/zhuyaun/tijian/tijian',
					// 	name: '/static/icon/jcbg.png',
					// 	title: '检测报告'
					// },
					// {
					// 	id: '1',
					// 	token: 'ss',
					// 	path: '/pages/Yibao/pay/indexyb',
					// 	name: '/static/icon/cfmx.png',
					// 	title: '是是是'
					// },
					{
							id: '5',
							token: 'ss',
							path: '/pages/block/Visit/Visitcopyadd',
							name: '/static/icon/ettj.png',
							title: '体检人员'
						},
					// {
					// 	id: '2',
					// 	token: 'sss',
					// 	path: '/pages/MedicalExamination/Record/Record',
					// 	name: '/static/icon2/tjjl.png',
					// 	title: '体检记录'
					// }

				],
				zylist: [
									// {
									// 	id: '1',
									// 	token: 'ss',
									// 	path: '/pages/zhuyaun/bgcx/slbg',
									// 	name: '/static/icon/rqd.png',
									// 	title: '测试页面'
									// },
									// {
									// 	id: '1',
									// 	token: 'ss',
									// 	path: '/pages/zhuyaun/charge/charge',
									// 	name: '/static/icon/fyqd.png',
									// 	title: '费用清单'
									// },
									{
										id: '2',
										token: 'ss',
										path: '/pages/tool/jynotice/rysc',
										name: '/static/icon/rysc.png',
										title: '入院手册'
									},
									
								],
				mzlist: [{
						id: '5',
						token: 'ss',
						path: '/pages/block/Visit/Visit',
						name: '/static/icon/jzrgl.png',
						title: '就诊人管理'
					},
					{
						id: '0',
						token: 'ss',
						path: '/pages/register/Scheduling/record/record',
						name: '/static/icon/ghjl.png',
						title: '预约记录'
					},
					{
						id: '2',
						token: 'ss',
						path: '/pages/tool/jynotice/rysc',
						name: '/static/icon/rysc.png',
						title: '入院手册'
					},
					// {
					// 	id: '1',
					// 	token: 'ss',
					// 	path: '/pages/outpatient/index/index',
					// 	name: '/static/icon/mzjf.png',
					// 	title: '门诊缴费'
					// },
					// {
					// 	id: '0',
					// 	token: 'ss',
					// 	path: '/pages/zhuyaun/charge/chargemz',
					// 	name: '/static/icon/cfmx.png',
					// 	title: '处方明细'
					// },


				],
				ynlist: [
					// {
					// 	id: '4',
					// 	token: 'ss',
					// 	path: '/pages/tool/jynotice/jynotice',
					// 	name: '/static/icon/jyxz.png',
					// 	title: '就医须知'
					// },
					{
						id: '6',
						token: 'ss',
						path: '/pages/zhuyaun/ksjs/ksjs',
						name: '/static/icon/ksjs3.png',
						title: '科室介绍'
					},
					{
						id: '8',
						token: 'ss',
						path: '/pages/doctor/doctor',
						name: '/static/icon/doctor.png',
						title: '医生介绍'
					},
					{
						id: '9',
						token: 'ss',
						path: '/pages/zhuyaun/news/news',
						name: '/static/icon/jkzx2.png',
						title: '健康咨询'
					},
					{
						id: '2',
						token: 'ss',
						path: '/pages/menzhenmanyidu/myddc',
						name: '/static/icon/rysc.png',
						title: '满意度调查'
					},
					{
						id: '3',
						token: 'ss',
						path: '/pages/zhigongmanyidu/zhigongmanyidu',
						name: '/static/icon/wjzr.png',
						title: '职工满意度'
					}
					// {
					// 	id: '3',
					// 	token: 'ss',
					// 	path: '/pages/zhuyaun/myddc/myddc',
					// 	name: '/static/icon/myddc.png',
					// 	title: '满意度调查'
					// },
					// {
					// 	id: '7',
					// 	token: 'ss',
					// 	path: '/pages/navigation/navigation',
					// 	name: '/static/icon/dh.png',
					// 	title: '医院导航'
					// }

				]

			}
		},
		computed: {
			...mapState(['token'], ['userInfo']),
			...mapGetters(['hasLogin', 'getUserInfo']),
		},
		onShow() {

			if (this.hasLogin) {
				//this.$store.dispatch('getUserInfo');
				this.mrjzr()
			} else {
				this.toWx()
			}

		},
		methods: {
			mrjzr() {
				this.$request("patient", "defaultInfo").then(res => {
					//console.log("默认就诊人",res)
					if (res.code == 1) {
						if (res.data) {
							this.user = res.data
							this.exist = true
							console.log(this.user)
						} else {
							this.exist = false
						}

					} else {
						this.exist = false
						// return
						console.log("暂无就诊人")
						// uni.showToast({
						// 	title: res.msg,
						// 	icon: "none",
						// 	duration: 2000,
						// });
					}
				})
			},
			toWx() {
				// return
				let code = ''
				uni.showLoading({
					title: '登录中',
					mask: true
				});
				//console.log('登录！')
				// 在需要实现微信公众号登录的地方调用 uni.login() 方法
				// console.log("local")
				// 判断是否是微信内置浏览器
				const isWechat = () => {
					let ua = window.navigator.userAgent.toLowerCase();
					return ua.match(/MicroMessenger/i) == 'micromessenger';
				}
				if (isWechat) {
					//公司
					var appid = 'wx0d080850649831d2';
					//获取路径（要在微信内置浏览器打开，或者是用你部署环境的链接打开）
					let local = window.location.href.split("#")[0];
					//console.log("local", local)
					//拼接在微信时打开的url
					let url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" +
						encodeURIComponent(local) + "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
					// 从url中截取code
					code = this.GetParam(window.location.href.split("#")[0], "code");
					console.log("code", code)
					if (!code) {
						window.location.href = url;
					} else {
						this.$request("auth", "wxlogin", {
							Code: code
						}).then(res => {
							console.log(res)
							uni.hideLoading();
							if (res.code == 1) {
								uni.showToast({
									title: '登陆成功',
									icon: 'none',
									duration: 2000
								});
								console.log("123")
								this.$store.commit('setToken', {
									token: res.data.AccessToken,
									mark: res.data.LoginMark,
									expire: res.data.Expires
								});
								console.log("后台返回", res)
								this.mrjzr()
							}
							// this.$dialog.msg('登录成功', 500).then(function() {
						})
						// // 处理截取到的code
						// code = this.GetParam(window.location.href, "code");
						// var openid = localStorage.getItem('openid')
					}
				} else {
					console.log('请在微信客户端打开')
				}
			},
			GetParam(url, code) {
				url = url + "";
				let regstr = "/(\\?|\\&)" + code + "=([^\\&]+)/";
				let reg = eval(regstr);
				//eval可以将 regstr字符串转换为 正则表达式
				let result = url.match(reg);
				if (result && result[2]) {
					return result[2];
				}
			},
			Mknowledge() {
				// let Code = this.$store.state.wledge.Mknowledge
				uni.navigateTo({
					url: '/pages/zhuyaun/bgcx/bgcxxx',
					fail(error) {
						console.log(error)
					}
				})
			},
			Department() {
				if(!this.exist){
					uni.showModal({
						title: '提示',
						content: '您还没有就诊人，请先去添加就诊人',
						confirmText: '去添加',
						showCancel: false,
						success: function(res) {
							uni.reLaunch({
								url: '/pages/block/Visit/Visit'
							})
						}
					});
					return
				}
				uni.navigateTo({
					url: `/pages/register/selectDepartment/selectDepartment`,
					fail(error) {
						console.log(error)
					}
				})
			},
			addVisit() {
				uni.navigateTo({
					url: `/pages/block/addVisit/addVisit`,
					fail(error) {
						console.log(error)
					}
				})
			},
			closeOnClickOverlays() {
				this.showcode = false
			},
			clicks() {
				this.showcode = true
			},
			canvas() {
				this.couponQrCode()
			},
			open() {
				// console.log('open');
			},
			close() {
				this.showcode = false
				// console.log('close');
			},
			couponQrCode() {

				console.log("UQRCode", UQRCode)

				// 获取uQRCode实例
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = "123456";
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 200;
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();

				this.showcode = true
			},
			bindmarkertap() {
				// 打开的点击事件，传经纬度和地点名
				console.log('走的这里', '中国矿业大学南湖校区');
				wx.openLocation({
					latitude: 34.28568, // 纬度
					longitude: 117.25661, // 经度
					name: '徐州仁慈手外伤专科医院', // 地址名称
					address: '徐州仁慈手外伤专科医院', // 详细地址
					success: function(r) {
						console.log(r)
					},
					fail: function(res) {
						console.log('拉起失败啦', res)
					}
				})
			},
			addjzk() {
				//console.log(this.token)
				let timeId = false
				uni.navigateTo({
					url: `/pages/block/Visit/Visit?doctorinfor=${timeId}`,
					fail(error) {
						console.log(error)
					}
				})
			},
			zylistclick(index) {
				// console.log(index)
				let path = this.zylist[index].path
				if (path != false) {
					// console.log("132")
					uni.navigateTo({
						url: path,
						fail(error) {
							console.log(error)
						}
					})
				} else {
					uni.showToast({
						title: '此模块正在开发',
						icon: 'none',
						duration: 2000
					});
				}
			},
			tjlistclick(index) {
				// console.log(index)
				// if(this.tjlist[index].id=='0'){
				// 	if(!this.exist){
				// 		uni.showModal({
				// 			title: '提示',
				// 			content: '您还没有就诊人，请先去添加就诊人',
				// 			confirmText: '去添加',
				// 			showCancel: false,
				// 			success: function(res) {
				// 				uni.reLaunch({
				// 					url: '/pages/block/Visit/Visit'
				// 				})
				// 			}
				// 		});
				// 		return
				// 	}
					
				// }
				let path = this.tjlist[index].path
				console.log(path);
					console.log(11111);
				if (path != false) {
					uni.navigateTo({
						url: path,
						fail(error) {
							console.log(error)
						}
					})
				} else {
					uni.showToast({
						title: '此模块正在开发',
						icon: 'none',
						duration: 2000
					});
				}
			},
			mzlistclick(index) {
				console.log(index)
				let path = this.mzlist[index].path
				if (path != false) {
					uni.navigateTo({
						url: path,
						fail(error) {
							console.log(error)
						}
					})
				} else {
					uni.showToast({
						title: '此模块正在开发',
						icon: 'none',
						duration: 2000
					});
				}
			},
			click(index) {
				console.log(index)
				let path = this.ynlist[index].path

				if (path != false) {
					uni.navigateTo({
						url: path,
						fail(error) {
							console.log(error)
						}
					})
				} else {
					uni.showToast({
						title: '此模块正在开发',
						icon: 'none',
						duration: 2000
					});
				}
			},
			searchs() {
				let keywords = this.keyword
				uni.navigateTo({
					url: `/pages/doctor/doctor?keyword=${keywords}`,
					fail(error) {
						console.log(error)
					}
				})
			},
			hideInsurantName(val) {
				if (!val || val === '') return ''
				let name = ''
				if (val.length === 2) {
					name = val.substring(0, 1) + '*' // 截取name 字符串截取第一个字符，
				} else if (val.length === 3) {
					name = val.substring(0, 1) + '*' + val.substring(2, 3) // 截取第一个和第三个字符
				} else if (val.length === 4) {
					name = val.substring(0, 2) + '*' + '*' // 4个字隐藏后面两个
				} else if (val.length > 4 && val.length < 11) {
					name = val.substring(0, 1) // 5个字只显示第一个字
					for (let i = 0; i < val.length - 1; i++) {
						name = name + '*'
					}
				} else if (val.length == 18) {
					name = val.substring(0, 6) + '********' + val.substring(14, 18) // 身份证

				} else if (val.length == 11) {
					name = val.substring(0, 3) + '****' + val.substring(7, 11) // 身份证

				}
				return name
			}
		}
	}
</script>

<style>
	@import './index.css'
</style>
<style lang="scss">
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>